<template>
  <div class="orderpayresult-container nav-bar-top">
    <!-- 导航栏 -->
    <van-nav-bar class="nav-bar" title="支付结果" left-arrow @click-left="$router.replace('/user')"/>
    <div class="result">
      <van-image width="80" height="50" src="imgs/user/order/pay_success.png" />
      <span class="title">支付成功</span>
      <span class="money">¥{{orderInfo.orderPayMoney | fentoyuan}}</span>
    </div>
    <!-- 操作 -->
    <div class="btn-list">
      <van-button @click="$router.replace('/')">返回首页</van-button>
      <van-button @click="$router.push({path: '/orderDetail', query: {id: orderInfo.id, itemLength: orderInfo.orderItemList.length}})">查看订单</van-button>
    </div>
  </div>
</template>

<script>
import constants from '@/config/constants'
import orderApi from '@/api/orderApi';

export default {
  name: 'orderPayResult',
  data () {
    return {
      orderInfo: {}
    }
  },
  created () {
    this.getOrderDetail();
  },
  methods: {
    async getOrderDetail () {
      const result = await orderApi.orderDetail(this.$route.query.id);
      if(result.code == constants.SUCCESS){
        this.orderInfo = result.data;
      }
    }
  }
}
</script>

<style lang="scss">
.orderpayresult-container{
  .result{
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title{
      margin-top: 14px;
      margin-bottom: 10px;
      color: #333;
      font-weight: bold;
      font-size: 15px;
    }
    .money{
      color: #e1212b;
      font-size: 18px;
      position: relative;
      left: -3px;
    }
  }
  .btn-list{
    padding: 0px 30px;
    display: flex;
    justify-content: space-between;
    .van-button{
      width: 130px;
    }
  }
}
</style>
